.aw-switch {
	$width: 38px;
	$height: 22px;
	$inner-pad: 2px;

	cursor: pointer;
	text-indent: -999em;
	display: block;
	width: $width;
	height: $height;
	border-radius: 30px;
	border: none;
	position: relative;
	box-sizing: border-box;
	transition: all 0.3s ease;
	box-shadow: inset 0 0 0 0 transparent;

	&:focus {
		outline: none;
	}

	&::before {
		border-radius: 50%;
		background: $white;
		content: "";
		position: absolute;
		display: block;
		width: $height - ($inner-pad*2);
		height: $height - ($inner-pad*2);
		top: $inner-pad;
		left: $inner-pad;
		transition: all 0.15s ease;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}


	&[data-aw-switch="on"] {
		box-shadow: inset 0 0 0 calc($height / 2) var(--wp-admin-theme-color);

		&::before {
			transform: translateX($width - $height);

		}
	}

	&[data-aw-switch="off"] {
		background: #ccc;
	}

	&.aw-loading {
		cursor: default;
		opacity: 0.5;
	}
}
